<template>
  <div>
    <div id="chart10"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      myChart: null,
    };
  },
  computed:{
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode"]),
  },
  watch: {
    areaCode: {
      handler(newVal, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    echartsFn(arr) {
      // 真实后端数据
      const annularList = arr;
      // [
      //   { value: 8, name: "断层" },
      //   { value: 8, name: "积水区" },
      //   { value: 10, name: "陷落柱" },
      // ];
      // 颜色
      const colorList = {
        断层: ["#54A8FF", "#8AC4FF"],
        积水区: ["#B6E8D0", "#70D3A3"],
        陷落柱: ["#AC7BE0", "#D9C2F1"],
      };

      // 组装数据
      const newAnnularList = annularList.map((item) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[item.name][0],
              },
              {
                offset: 1,
                color: colorList[item.name][1],
              },
            ]),
          },
        };
      });

      // 配置项
      const option = {
        backgroundColor: "transparent",
        // title: {
        //   text: "设备类型分布",
        //   left: "center", // 对齐方式居中
        //   top: "45%", // 距离顶部
        //   textStyle: {
        //     // 文字配置
        //     color: "#fff", // 文字颜色
        //     fontSize: 15, // 字号
        //     align: "center", // 对齐方式
        //   },
        // },
        tooltip: {
          show: true,
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          backgroundColor: "#0B2C54", // 提示框浮层的背景颜色。
          borderRadius: 5,
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
        },
        legend: {
          top: "bottom",
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字号
          },
        },
        series: [
          {
            name: "危险源",
            type: "pie",
            padAngle: 10,
            radius: ["35%", "55%"],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#183F6B",
              borderWidth: 4,
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                if (params.name == "断层") {
                  // return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                  return "{a| " + params.name + "}\n{a| " + params.value + "}";
                } else if (params.name == "积水区") {
                  return "{b| " + params.name + "}\n{b| " + params.value + "}";
                } else {
                  return "{c|" + params.name + "}\n{c| " + params.value + "}";
                }
              },
              rich: {
                a: {
                  color: "#54A8FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#70D3A3",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#AC7BE0",
                  align: "left",
                  padding: 4,
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getList(){
      axios.get("/dataview/hydrology/getAreaSafetyGradeDangerSource",{
        params: {
          areaCode: this.areaCode,//换三维对应的区域编码
          // areaName:''
        }
      }).then((res) => {
        if(res.data){
          this.echartsFn(res.data);
        }
      })
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart10"));
    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  created() {
    this.getList();
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>

<style scoped lang="scss">
#chart10 {
  width: 100%;
  height: 300px;
}
</style>